<template>
  <div
    :class="['parkTable', isMove ? 'mouse' : '']"
    ref="moveRef"
    @click="toTop"
    @mousedown="mousedown"
  >
    <div class="close" @click="closeTable">
      <a-icon type="close"/>
    </div>
    <div class="parkTable-title">
      <div class="one-title">
        <div class="one-title-park">
          <div class="one-title-park-tip"></div>
          企业信息
        </div>
        <div class="one-title-data"><img src="@/assets/gis/shujufenxi@2x.png" alt=""/> 数据分析</div>
      </div>
      <div class="nav-title">
        <div class="lf">
          <em>基本信息</em>
        </div>
        <div class="rf">
          <em class="more">查看更多</em>
        </div>
      </div>
    </div>
    <table class="parkTable-content" border="1">
      <tr class="one-content">
        <th>企业名称</th>
        <th>xxxx企业</th>
      </tr>
      <tr class="one-content">
        <th>
          法定代表人
        </th>
        <th>
          张三
        </th>
        <th>
          联系电话
        </th>
        <th>18256982230</th>
      </tr>
      <tr class="one-content">
        <th>
          环保负责人
        </th>
        <th>
          李四
        </th>
        <th>
          联系电话
        </th>
        <th>18256982230</th>
      </tr>
      <tr class="one-content">
        <th>
          行业类别
        </th>
        <th>
          化工
        </th>
        <th>
          环保管理类别
        </th>
        <th>省重点
        </th>
      </tr>
      <tr class="one-content">
        <th>
          生产状况
        </th>
        <th>
          正常
        </th>
        <th>
          是否为园中园
        </th>
        <th>是，园区：XXXX</th>
      </tr>
      <tr class="one-content">
        <th>
          是否为租赁企业
        </th>
        <th>
          是，房东：XXXX
        </th>
        <th>
          一企一档
        </th>
        <th>需要建立</th>
      </tr>
      <tr class="one-content">
        <th>园区地址</th>
        <th>合肥市肥西县XXXXXXX</th>
        <th>定位</th>
      </tr>
    </table>
    <div class="table-bottom">
      <div class="companyList">
        <a-tabs default-active-key="1" :tabBarGutter="0" >
          <a-tab-pane key="1" tab="日常核查">
            <div class="table-bottom-right more">
              查看更多
            </div>
            <div>
              <a-table :columns="columns" :data-source="data" bordered>
                <span slot="action" slot-scope="text, record" class="btns">
                  <img
                    class="detail-image"
                    :src="require('@/assets/gis/detail.svg')"
                  /></span>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="雨污混接专项" force-render>
            <div class="table-bottom-right more">
              查看更多
            </div>
            <div>
              <a-table :columns="columns" :data-source="data" bordered>
                <span slot="action" slot-scope="text, record" class="btns">
                  <img
                    class="detail-image"
                    :src="require('@/assets/gis/detail.svg')"
                  /></span>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="投诉专项" force-render>
            <div class="table-bottom-right more">
              查看更多
            </div>
            <div>
              <a-table :columns="complaintColumns" :data-source="complaintData" bordered>
                <span slot="action" slot-scope="text, record" class="btns">
                  <img
                    class="detail-image"
                    :src="require('@/assets/gis/detail.svg')"
                  /></span>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="其他专项" force-render>
            <div class="table-bottom-right more">
              查看更多
            </div>
            <div>
              <a-table :columns="otherColumns" :data-source="otherData" bordered>
                <span slot="action" slot-scope="text, record" class="btns">
                  <img
                    class="detail-image"
                    :src="require('@/assets/gis/detail.svg')"
                  /></span>
              </a-table>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>

    </div>
  </div>
</template>
<script>
  const columns = [
    {
      dataIndex: 'inspector',
      key: 'inspector',
      title: '核查人员'
    },
    {
      title: '核查日期',
      dataIndex: 'inspectDate',
      key: 'inspectDate'
    },
    {
      title: '核查时段',
      dataIndex: 'inspectDuring',
      key: 'inspectDuring'
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ];
  const complaintColumns = [
    {
      dataIndex: 'inspector',
      key: 'inspector',
      title: '核查人员'
    },
    {
      title: '核查日期',
      dataIndex: 'inspectDate',
      key: 'inspectDate'
    },
    {
      title: '核查时段',
      dataIndex: 'inspectDuring',
      key: 'inspectDuring'
    },
    {
      title: '投诉类型',
      dataIndex: 'complaintType',
      key: 'complaintType'
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ];
  const complaintData = [
    {
      key: '1',
      inspector: 'John Brown',
      inspectDate: '2021-11-12',
      inspectDuring: '09:18:21~10:18:21',
      complaintType: '噪声'
    },
    {
      key: '2',
      inspector: 'John Brown',
      inspectDate: '2021-11-12',
      inspectDuring: '09:18:21~10:18:21',
      complaintType: '噪声'
    },
    {
      key: '3',
      inspector: 'John Brown',
      inspectDate: '2021-11-12',
      inspectDuring: '09:18:21~10:18:21',
      complaintType: '噪声'
    }
  ];
  const data = [
    {
      key: '1',
      inspector: 'John Brown',
      inspectDate: '2021-11-12',
      inspectDuring: '09:18:21~10:18:21'
    },
    {
      key: '2',
      inspector: 'John Brown',
      inspectDate: '2021-11-12',
      inspectDuring: '09:18:21~10:18:21'
    },
    {
      key: '3',
      inspector: 'John Brown',
      inspectDate: '2021-11-12',
      inspectDuring: '09:18:21~10:18:21'
    }
  ];
  const otherColumns = [
    {
      dataIndex: 'inspector',
      key: 'inspector',
      title: '核查人员'
    },
    {
      title: '核查日期',
      dataIndex: 'inspectDate',
      key: 'inspectDate'
    },
    {
      title: '核查时段',
      dataIndex: 'inspectDuring',
      key: 'inspectDuring'
    },
    {
      title: '核查类型',
      dataIndex: 'otherType',
      key: 'otherType'
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ];
  const otherData = [
    {
      key: '1',
      inspector: 'John Brown',
      inspectDate: '2021-11-12',
      inspectDuring: '09:18:21~10:18:21',
      otherType: '水'
    },
    {
      key: '2',
      inspector: 'John Brown',
      inspectDate: '2021-11-12',
      inspectDuring: '09:18:21~10:18:21',
      otherType: '水'
    },
    {
      key: '3',
      inspector: 'John Brown',
      inspectDate: '2021-11-12',
      inspectDuring: '09:18:21~10:18:21',
      otherType: '水'
    }
  ];

  export default {
    data() {
      return {
        otherColumns,
        otherData,
        data,
        columns,
        isMove: false, // 是否具备移动的条件 鼠标按下才可移动
        right: 0,
        top: 0,
        complaintColumns,
        complaintData
      };
    },
    methods: {
      toTop() {
        if (!this.move) return
      },
      // 鼠标按下
      mousedown(event) {
        const _this = this
        let t_clientX = event.clientX || event.touches[0].clientX
        let t_clientY = event.clientY || event.touches[0].clientY
        this.isMove = true
        let rightPosition = 0;
        let topPosition = 0
        document.onmousemove = (ev) => {
          if (!this.isMove) return
          const moveX = ev.clientX - t_clientX
          const moveY = ev.clientY - t_clientY
          const right = this.right - moveX <= 0 ? 0 : this.right - moveX
          const top = this.top + moveY <= 0 ? 0 : this.top + moveY
          _this.$refs.moveRef.style.right = right + 'px'
          _this.$refs.moveRef.style.top = top + 'px'
          rightPosition = right
          topPosition = top
        }
        document.onmouseup = () => {
          _this.isMove = false
          this.right = rightPosition
          this.top = topPosition
        }
      },
      closeTable() {
        this.$parent.companyShow = false
      }
    }
  };
</script>
<style scoped lang="less">
  .parkTable {
    width: 536px;
    height: 600px;
    font-size: 15px;
    position: absolute;
    background: rgba(19, 28, 50, 0.8);
    color: #fff;
    top: 50px;
    right: 25px;
    z-index: 2;

    .parkTable-title {
      display: flex;
      flex-direction: column;

      .one-title {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 30px;
        align-items: center;
        font-weight: 500;
        color: #fff;

        img {
          width: 20px;
          height: 20px;
        }

        background: rgba(0, 0, 0, 0.5);

        .one-title-park {
          display: flex;

          .one-title-park-tip {
            width: 6px;
            height: 18px;
            background: #02E0F7;
            margin-left: 20px;
            margin-right: 8px;
          }
        }

        .one-title-data {
          margin-right: 20px;
          margin-left: 8px;
        }
      }

      .nav-title {
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: space-between;
        padding: 8px 19px 6px;
        border-bottom: 1px solid rgba(25, 144, 253, 0.35);

        em {
          font-weight: 500;
          color: #02E0F7;
        }

      }
    }

    th {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .parkTable-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      border-spacing: 0;
      border-collapse: collapse;
      margin: 9px 21px;

      .one-content {
        display: flex;
        justify-content: start;
        width: 100%;
      }

      .two-content {
        display: flex;
        justify-content: center;
        width: 100%;

        th {
          display: flex;
          align-items: center;
          flex: 1;
          justify-content: center;
        }
      }
    }

    .table-bottom {
      font-size: 12px;

      .companyList {
        text-align: center;
      }

      .table-bottom-right {
        text-align: right;
        color: #02E0F7;
        margin: 10px 17px 10px 0;
      }
    }
  }

  .btns {
    cursor: pointer;
  }

  ::v-deep .ant-table th {
    background: rgba(19, 28, 50, 0.8) !important;
    font-size: 14px;
    color: #FFFFFF !important;
    padding: 5px 0;
    white-space: nowrap;
    text-align: center;
  }

  ::v-deep .ant-table p {
    color: #FFFFFF !important;
  }

  ::v-deep .ant-table td {
    color: #FFFFFF !important;
    padding: 5px 0;
    white-space: nowrap;
    text-align: center;
  }

  /*有固定行的ant-design-vue 表格滑动样式*/
  ::v-deep .ant-table-fixed .ant-table-row-hover {
    background: #eef1f6 !important;
  }

  ::v-deep .ant-table-fixed .ant-table-row-hover > td {
    background: #eef1f6 !important;
  }

  /*没有固定行的表格个样式*/
  ::v-deep .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
    background-color: #3B0028 !important;
  }

  ::v-deep .ant-table-body .ant-table-row-hover {
    background: #3B0028 !important;
  }

  ::v-deep .ant-table-body .ant-table-row-hover > td {
    background: #3B0028 !important;
  }

  .more {
    cursor: pointer;
  }

  .mouse {
    cursor: move;
  }

  .close {
    position: absolute;
    width: 17px;
    height: 17px;
    background: rgba(19, 28, 50, 0.8);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    top: -24px;
    right: 0;
  }
</style>
